<!DOCTYPE html>
<html lang="en">
<head>
    <title>东风日产×NBA "未来之星"</title>
    <link rel="import" href="../common/head.html?__inline">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="sign-up.less">
    <link rel="stylesheet" href="/web/lib/webuploader/webuploader.css">

    <script src="/node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
    <!--加载导航栏-->
    <link rel="import" href="../common/header-pc.html?__inline">
    <!--加载导航栏-->

    <div class="title-1"></div>
    <div class="main-cont"></div>

    <div class="forms content" id="forms" v-cloak>
        <div class="info-title info-title-1"></div>

        <div class="group">
            <div class="input all">
                <label>选择报名城市</label>
                <select v-model="user.city">
                    <option disabled value="">--请选择报名城市--</option>
                    <option v-for="item in cityName" :value="item.name">{{item.name}}</option>
                </select>
                <b v-if="user.city">报名截止日期：{{cityTip}}</b>
            </div>
        </div>

        <div class="group">
            <div class="input">
                <label>姓名</label>
                <input type="text" v-model="user.realname" placeholder="请输入姓名">
                <span>(必填)</span>
            </div>
            <div class="input">
                <label>绰号</label>
                <input type="text" v-model="user.nickname" placeholder="请输入绰号">
                <span>(非必填)</span>
            </div>
        </div>

        <div class="group">
            <div class="input">
                <label>年龄</label>
                <select v-model="user.age">
                    <option disabled value="">--请选择年龄--</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                </select>
                <span>(必选)</span>
            </div>
            <div class="input">
                <label>组别</label>
                <select v-model="user.age_group" disabled>
                    <option disabled value="">--请选择组别--</option>
                    <option value="小学组">小学组</option>
                    <option value="中学组">中学组</option>
                </select>
                <span>(必填)</span>
            </div>
        </div>

        <div class="group">
            <div class="input">
                <label>手机号</label>
                <input type="text" v-model="user.mobile_phone" maxlength="11" placeholder="请输入手机号">
                <span>(必填)</span>
            </div>
            <div class="input">
                <label>邮箱</label>
                <input type="text" v-model="user.email" placeholder="请输入邮箱">
                <span>(非必填)</span>
            </div>
        </div>

        <div class="group">
            <div class="input">
                <label>擅长位置</label>
                <input type="text" v-model="user.position" placeholder="请输入擅长位置">
                <span>(非必填)</span>
                <!--<b>列如：PG，PG/SG，SG/SF，PF/C</b>-->
            </div>
            <div class="input">
                <label>俱乐部名</label>
                <input type="text" v-model="user.clubname" placeholder="请输入俱乐部名">
                <span>(非必填)</span>
            </div>
        </div>

        <div class="group group-area">
            <div class="input all">
                <label>个人宣言</label>
                <textarea v-model="user.declaration" maxlength="15" placeholder="请输入个人宣言"></textarea>
                <span>(非必填)</span>
            </div>
        </div>

        <div class="info-title info-title-2"></div>

        <div class="car-choice">
            <label for="checkbox">
                <div class="input" :class="{true : user.is_nissan}">
                    <input type="checkbox" id="checkbox" value="true" v-model="user.is_nissan" hidden>
                </div>我是日产车主
            </label>
        </div>

        <div class="group">
            <div class="input">
                <label>我的车型</label>
                <select v-model="user.car_model" :disabled="!user.is_nissan">
                    <option disabled value="">--请选择车型--</option>
                    <option value="楼兰">楼兰</option>
                    <option value="全新天籁">全新天籁</option>
                    <option value="天籁公爵">天籁公爵</option>
                    <option value="全新轩逸">全新轩逸</option>
                    <option value="轩逸经典">轩逸经典</option>
                    <option value="阳光">阳光</option>
                    <option value="蓝鸟">蓝鸟</option>
                    <option value="西玛">西玛</option>
                    <option value="TIIDA骐达">TIIDA骐达</option>
                    <option value="骊威">骊威</option>
                    <option value="玛驰">玛驰</option>
                    <option value="全新劲客">全新劲客</option>
                    <option value="全新奇骏">全新奇骏</option>
                    <option value="全新逍客">全新逍客</option>
                    <option value="新楼兰">新楼兰</option>
                    <option value="全新途达">全新途达</option>
                    <option value="轩逸.纯电">轩逸.纯电</option>
                    <option value="全新GT-R">全新GT-R</option>
                    <option value="370Z">370Z</option>
                    <option value="2018款途乐">2018款途乐</option>
                    <option value="贵士">贵士</option>
                    <option value="nismo系列">nismo系列</option>
                </select>
                <span>(必填)</span>
            </div>
            <div class="input">
                <label>车辆VIN码</label>
                <input type="text" v-model="user.car_vimnum" placeholder="请输入车辆VIN码" :disabled="!user.is_nissan">
                <span>(必填)</span>
            </div>
        </div>

        <div class="group">
            <div class="input">
                <label>专营店信息</label>
                <input type="text" v-model="user.car_store" placeholder="请输入专营店信息" :disabled="!user.is_nissan">
                <span>(非必填)</span>
            </div>
        </div>

        <div class="info-title info-title-3"></div>

        <div class="group group-upload">
            <div class="input all">
                <label>上传个人照片</label>
                <div class="upload-box" @click="clickUpload()" >
                    <img v-show="user.headimgurl" :src="user.headimgurl?'http://campaign.dongfeng-nissan.com.cn/2018/chinanba/enroll/web'+user.headimgurl:''" alt="">
                    <div class="cover">
                        <div class="icon" :class="{loading : img.loading}"></div>
                    </div>
                </div>
                <!--dom结构部分-->
                <div id="uploader-demo" class="disNone">
                    <!--用来存放item-->
                    <div id="fileList" class="uploader-list"></div>
                    <div id="filePicker">选择图片</div>
                </div>
                <b>上传个人照片，大小5M以内<br>请上传与篮球相关的个人照片</b>
            </div>
        </div>

        <div class="rule-box">

        </div>

        <div class="car-choice rule-box">
            <label for="rulebox">
                <div class="input" :class="{true : is_rule}">
                    <input type="checkbox" id="rulebox" value="true" v-model="is_rule" hidden>
                </div>我已阅读并同意
            </label>
            <b class="box-explain-open" data-type="1" data-tit="声明及免责事宜">声明及免责事宜</b>
        </div>

        <a class="save" @click="saveInfo()"></a>
    </div>


    <!--弹出框-->
    <div class="box-explain disNone">
        <div class="tit"></div>
        <div class="cont">
            <img src="img/rule-text.png" alt="">
        </div>
        <div class="box-close-btn"></div>
    </div>

    <div class="footer"></div>


</body>
<script src="/web/lib/webuploader/webuploader.html5only.js"></script>
<script src="/node_modules/vue/dist/vue.js"></script>
<script src="/web/lib/layer/layer.js"></script>
<script src="/web/js/config.js"></script>
<script src="./sign-up.js"></script>
</html>